<template>
  <s-layout title="当面付" class="set-userinfo-wrap">
    <view class="container">
      <view class="balance-section">
        <text>我的余额</text>
        <text>¥ {{ balance }}</text>
      </view>

      <view class="order-section">
        <text>订单金额</text>
        <input type="text" v-model="orderAmount" placeholder="请输入订单金额" />
      </view>

      <!-- <view class="coupon-section">
				<text>订单优惠</text>
				<view @click="showCouponModal = true">
					<text>优惠券</text>
					<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
			</view> -->

      <view class="remark-section">
        <text>添加备注</text>
        <input type="text" v-model="remark" placeholder="请输入备注信息" />
      </view>

      <view class="payment-wrapper">
        <s-payment-method :state="state" @onTapPay="onTapPay"></s-payment-method>
      </view>
      <view class="total-section">
        <text>应付金额 ¥{{ totalAmount }}</text>
      </view>

      <button
        style="background-color: #63be71; color: #fff"
        @click="submitOrder"
      >
        已与店员确认，立即买单
      </button>

      <!-- 优惠券弹窗 -->
      <!-- <uni-popup ref="popup" type="dialog">
				<uni-popup-dialog title="选择优惠券" message="请选择可用的优惠券" :before-close="true"
					@confirm="selectCoupon"></uni-popup-dialog>
			</uni-popup> -->
    </view>
  </s-layout>
</template>

<script>
import sheep from "@/sheep";
export default {
  data() {
    return {
      balance: sheep.$store("user").userInfo.price || 0,
      orderAmount: "",
      couponValue: 0,
      remark: "",
      showCouponModal: false,
      state: {
        payMethods: ["wechat", "money"],
      },
      payMethod: "",
    };
  },
  computed: {
    totalAmount() {
      const amount = parseFloat(this.orderAmount) || 0;
      return amount.toFixed(2);
    },
  },
  onLoad() {
    // console.log(sheep.$store('user').userInfo)
  },
  methods: {
    onTapPay(e) {
      if (e === "wechat") {
        this.payMethod = 1;
      } else if (e === "money") {
        this.payMethod = 2;
      }
    },
    async submitOrder() {
      if (!this.orderAmount || !parseFloat(this.orderAmount)) {
        uni.showToast({
          icon: "none",
          title: "请输入订单金额",
        });
        return;
      }
      if (!this.payMethod) {
        uni.showToast({
          icon: "none",
          title: "请选择支付方式",
        });
        return;
      }

      if (
        this.balance - parseFloat(this.orderAmount) < 0 &&
        this.payMethod === 2
      ) {
        uni.showToast({
          icon: "none",
          title: "账户余额小于订单余额请使用微信支付",
        });
        return;
      }

      const params = {
        amount: this.orderAmount,
        payType: this.payMethod,
        remark: this.remark,
      };
      const res = await sheep.$api.payIn.facePay(params);
      if (res.code === 200) {
        if (this.payMethod === 2) {
          sheep.$store("user").getInfo();
          uni.showToast({
            icon: "none",
            title: "支付成功",
          });
          setTimeout(() => {
            uni.redirectTo({
              url: "/pages/user/pay-in-order-list",
            });
          }, 500);
        } else if (this.payMethod === 1) {
          uni.requestPayment({
            provider: "wxpay",
            timeStamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            package: "prepay_id=" + res.data.package_,
            signType: res.data.signType,
            paySign: res.data.paySign,
            success: function (res) {
              uni.showToast({
                icon: "none",
                title: "支付成功",
              });
              setTimeout(() => {
                uni.redirectTo({
                  url: "/pages/user/pay-in-order-list",
                });
              }, 500);
              console.log("success:" + JSON.stringify(res));
            },
            fail: function (err) {
              console.log("fail:" + JSON.stringify(err));
            },
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  font-size: 33rpx;
}

.balance-section,
.order-section,
.coupon-section,
.remark-section,
.total-section {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.balance-section text:last-child,
.total-section text {
  float: right;
}
.total-section {
  height: 50rpx;
  line-height: 50rpx;
}

.order-section input,
.remark-section input {
  border-bottom: 2rpx solid #ccc;
  padding: 32rpx;
  width: calc(100vw - 160rpx);
  /* width: 100%; */
  /* box-sizing: border-box; */
}

.coupon-section view {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-wrapper {
  // 通过包装器来控制内部组件的字体大小
  :deep(.pay-title) {
    font-size: 36rpx !important; // 你想要的字体大小
    font-weight: 600 !important; // 可选：调整字体粗细
  }
  
  :deep(.userInfo-money) {
    font-size: 30rpx !important;
  }
  
  :deep(.modal-content .pay-title) {
    font-size: 32rpx !important;
  }
}
</style>
